<!-- doctype html -->
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>ENCODE: WAV to FLAC conversion</title>

	<!--
		preparing to load the libflac.js library:

		* set custom location/path to FLAC_SCRIPT_LOCATION:
			needs to be the same paths as the library script, so that the library can
			find additional files that it needs to load

		* detect support for WebAssembly:
			if supported, use wasm library, otherwise the fallback asm.js library

	 -->
	<script src="util/check-params.js" type="text/javascript"></script>
	<script src="util/check-support.js" type="text/javascript"></script>
	<script src="util/load-script.js" type="text/javascript"></script>
	<script type="text/javascript">

		var demoType = 'encode';

		var global = window;

		// check search-param "lib", i.e. "?lib=<variant>":
		// -> set different library variants: 'min' | 'dev' | '' (default)
		var variant = getLibVariantPathParam();
		global.FLAC_SCRIPT_LOCATION = '../dist/';


		//check search-param "wasm", if not using WebAssembly should be forced, even if would be supported
		var wasmDisable = getDisableWebAssembly();

		var lib;
		if(!wasmDisable && isWebAssemblySupported()){
			lib = 'libflac.'+variant.replace('/', '.')+'wasm.js';
		} else {
			lib = 'libflac.'+variant.replace('/', '.')+'js';
		}
		var libFile = global.FLAC_SCRIPT_LOCATION.replace('//','/') + lib;

		// load libflac.js library variant and demo scripts after document was loaded:
		global.onload = function(){
			loadScripts([libFile, demoType+'-func.js', 'util/download-util.js', 'util/data-util.js', 'util/file-handler.js', 'app-'+demoType+'.js'], function(err){
				console[err? 'error' : 'info'](err? 'encountered error '+err : 'scripts initialized successfully');
			});
		};

	</script>

		<style>
		.project-link {
			float: right;
		}
		.drop-zone {
			border: 1px red solid;
			height: 250px;
		}
		.drop-hint {
			text-align: center;
			padding-top: 100px;
		}
		.hint {
			background-color: #C6E7FF;
			color: #0094FF;
			border-radius: 50%;
			height: 1em;
			width: 1em;
			display: inline-block;
		}
		.hint:before {
			content: ' ? ';
			margin-left: 0.25em;
		}
		.hint.info:before {
			content: ' i ';
			margin-left: 0.25em;
		}
		.inline-note {
			text-indent: -3em;
			margin-left: 3em;
		}
	</style>

	</head>
	<body>
		<div>
				<div class="project-link">Demo for <a href="https://github.com/mmig/libflac.js">libflac.js</a></div>
				<h1><a href="encode.html">WAV to FLAC conversion</a></h1>

				<p>
				Either use the drop zone or the file selection button.
				</p>
				<p class="inline-note">
				<em>NOTE:</em> If the browser plays the WAV-file instead of converting it to FLAC,
											 change the file-extension before dropping it into the browser
				</p>
		</div>

		<!-- START: section for library variants -->
		<div>
			<style>
				#variants-collapse {
					background-color: #DFDFDF;
					color: #737373;
					border-radius: 50%;
					height: 1em;
					width: 1em;
					display: inline-block;
					text-decoration: none;
					padding-bottom: 4px;
					padding-left: 2px;
					padding-right: 2px;
				}
				.hidden {
					display: none;
				}
			</style>
			<h3>Library Variants <a href="#" id="variants-collapse" class="hidden">&rarr;</a></h3>
			<div id="variants-desc">
				<hr/>
				<p>
					<dl><dt>Technology:</dt>
						<dd><em>asm.js</em>: sub-set of JavaScript for optimized execution (if browser supports it; fully "JavaScript compatible")</dd>
						<dd><em>WASM</em>: new standard for "web binaries" (WebAssembly), i.e. binary execution format</dd>
					</dl>
					<dl><dt>Optimizations:</dt>
						<dd><em>debug</em>: all debugging output enabled</dd>
						<dd><em>release</em>: normal optimizations</dd>
						<dd><em>minified</em>: all optimizations enabled</dd>
					</dl>
					<br/>
				</p>
				<p>
					<h4>Load and Try Library Variants</h4>
					<em>Note that some library variants initialize synchronously, and some asynchronously.</em>
				</p>
				<table>
					<thead>
						<tr><th align="left">Technology &rarr;<br/> Optimization &darr;</th><th>asm.js</th><th>WASM</th></tr>
					</thead>
					<tbody>
						<tr><th align="left">release</th><td valign="top"><a href="?lib=&wasm=false&showSelect=true">[release.asmjs]</a><br/><em>sync init</em><br/><em>(default)</em></td><td valign="top"><a href="?lib=&wasm=true&showSelect=true">[release.]wasm</a><br/><em>async init</em></td></tr>
						<tr><th align="left">debug</th><td><a href="?lib=dev&wasm=false&showSelect=true">dev[.asmjs]</a><br/><em>sync init</em></td><td><a href="?lib=dev&wasm=true&showSelect=true">dev.wasm</a><br/><em>async init</em></td></tr>
						<tr><th align="left">minified</th><td><a href="?lib=min&wasm=false&showSelect=true">min[.asmjs]</a><br/><em>async init</em></td><td><a href="?lib=min&wasm=true&showSelect=true">min.wasm</a><br/><em>async init</em></td></tr>
					</tbody>
				</table>
				<script type="text/javascript">
					;(function(){
						var btn = document.getElementById('variants-collapse');
						btn.classList.remove('hidden');

						var descEl = document.getElementById('variants-desc');
						if(!/\bshowSelect=true\b/.test(document.location.search)){
							descEl.classList.add('hidden');
						} else {
							btn.innerHTML = '&nbsp;&darr;';
						}

						btn.addEventListener('click', function(){
							var isShow = descEl.classList.contains('hidden');
							var func = isShow? 'remove' : 'add';
							btn.innerHTML = isShow? '&nbsp;&darr;' : '&rarr;';
							descEl.classList[func]('hidden');
						}, false);

					})();
				</script>
				<hr/>
			</div>
		</div>
		<!-- END: section for library variants -->


	<div id="drop_zone" class="drop-zone"><div class="drop-hint">Drop WAV-files here</div></div>
	<input type="file" id="files" name="files[]" multiple />
	<input type="checkbox" id="check_download" checked>Download&nbsp;<div class="hint" title="download FLAC file after encoding"></div> &nbsp;
	<input type="checkbox" id="check_verify" checked>Verify&nbsp;<div class="hint" title="Checksum verification during encoding
(disable for faster encoding)"></div>
	<input type="checkbox" id="check_ogg">OGG&nbsp;<div class="hint" title="encode to OGG container file (instead of native FLAC)"></div>

	<!--input type="button" id="files_button" value="process file"-->
	<output id="list"></output>

</body>


</html>
